<template>
  <div>
    <ElDivider>操作栏设置</ElDivider>
    <ElForm label-width="80px" label-position="right" :model="tableOperation">
      <ElFormItem label="是否显示" prop="show">
        <ElSwitch v-model="tableOperation.show"></ElSwitch>
      </ElFormItem>
      <ElFormItem label="显示名称" prop="name">
        <ElInput v-model="tableOperation.name"></ElInput>
      </ElFormItem>
      <ElFormItem label="显示宽度" prop="width">
        <ElInput type="number" v-model="tableOperation.width"></ElInput>
      </ElFormItem>
      <ElFormItem label="显示数量" prop="num">
        <ElInput type="number" v-model="tableOperation.num"></ElInput>
      </ElFormItem>
    </ElForm>
    <ElDivider>操作按钮设置</ElDivider>
    <ElTable :data="tableAction" :show-header="false">
      <ElTableColumn prop="label" label="标签">
        <template #default="scope">
          <ElLink @click="handleEditItem(scope.row)">
            <ElButton :type="scope.row.type" link>
              <template #icon>
                <Icon :icon="scope.row.icon"></Icon>
              </template>
              {{ scope.row.label }}
            </ElButton>
          </ElLink>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="action" label="操作" width="70px">
        <template #default="{ row }">
          <ElButton text type="danger" @click="handleDelete(row)">
            <Icon icon="delete"></Icon>
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div style="margin: 10px">
      <ElButton link type="primary" @click="handleNewItem">
        <Icon icon="plus"></Icon>
        <span>添加一项</span>
      </ElButton>
    </div>
    <Dialog ref="dialogRef" :title="title" @submit="handleSubmit">
      <Form ref="formRef" :schemas="schemas" label-width="80px"></Form>
    </Dialog>
  </div>
</template>

<script setup lang="tsx" name="TableActionPanel">
import { computed, ref } from "vue";
import { ElDivider, ElForm, ElFormItem, ElInput, ElSwitch, ElTable, ElTableColumn, ElButton, ElLink } from "element-plus";
import { Icon } from "@/components/Icon";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, Select, useForm } from "@/components/Form";
import { generateId, deepClone } from "../../../util/common";
import { SchemaProps } from "@/components/Form/type";
const props = defineProps({
  designer: {
    type: Object
  }
});
const title = ref();
const dialogRef = ref();
const dialog = useDialog(dialogRef);
const formRef = ref();
const form = useForm(formRef);
const tableOperation = computed(() => {
  return props.designer!.widget!.tableOperation;
});
const tableAction = computed(() => props.designer!.widget!.tableAction);
const handleDelete = row => {
  const toolbar = tableAction.value;
  for (let index = 0; index < toolbar.length; index++) {
    if (tableAction.value[index].id === row.id) {
      tableAction.value.splice(index, 1);
      break;
    }
  }
};
const handleNewItem = () => {
  title.value = "新增操作栏";
  dialog.open(0);
  form.resetFields();
};
const handleEditItem = async row => {
  title.value = "编辑操作栏";
  await dialog.open(1);
  await form.updateFields(row);
};
const handleSubmit = async flag => {
  const fields = await form.validateFields();
  if (flag) {
    const toolbars = tableAction.value;
    for (let i = 0; i < toolbars.length; i++) {
      if (toolbars[i].id === fields.id) {
        toolbars[i] = deepClone(fields);
        break;
      }
    }
  } else {
    fields.id = "action" + generateId();
    tableAction.value.push(deepClone(fields));
  }
  dialog.close();
};
const dialogPageList = computed(() =>
  props.designer!.global.pageList.filter(page => {
    return page.layout === "dialogLayout";
  })
);
const schemas: SchemaProps[] = [
  {
    field: "label",
    label: "名称"
  },
  {
    field: "type",
    label: "类型",
    el: "select",
    elProps: {
      options: [
        { label: "primary", value: "primary" },
        { label: "success", value: "success" },
        { label: "warning", value: "warning" },
        { label: "danger", value: "danger" },
        { label: "info", value: "info" }
      ]
    }
  },
  {
    field: "icon",
    label: "图标",
    el: "icon-picker"
  },
  {
    field: "tooltip",
    label: "提示"
  },
  {
    field: "popConfirm",
    label: "气泡确认"
  },
  {
    field: "operType",
    label: "操作类型",
    el: "select",
    required: true,
    elProps: {
      options: [
        { label: "打开弹窗", value: "openDialog" },
        { label: "删除", value: "remove" }
      ]
    }
  },
  {
    field: "pageId",
    label: "操作弹窗",
    el: "select",
    elProps: {
      labelName: "pageName",
      valueName: "id",
      options: dialogPageList.value
    },
    render: (formModel, schema) => {
      const options = dialogPageList.value;
      const handleChange = value => {
        for (const page of dialogPageList.value) {
          if (page.id === value) {
            formModel.title = page.pageName;
            break;
          }
        }
      };
      return (
        <Select
          v-model={formModel[schema.field]}
          label-name="pageName"
          value-name="id"
          options={options}
          onChange={handleChange}
        ></Select>
      );
    },
    required: true,
    ifShow: formModel => formModel.operType === "openDialog"
  },
  {
    field: "title",
    label: "弹窗标题",
    required: true,
    ifShow: formModel => formModel.operType === "openDialog"
  }
];
</script>

<style scoped></style>
